atomとselector recoil

atomとselector

一意のキーが必要

コンポーネントからatom (共有状態) recoilを読み書きするには、useRecoilStateと呼ばれるフックを使用

const [fontSize, setFontSize] = useRecoilState(fontSizeState);

useState hooksと同じ感じ

atom (共有状態) recoilに基づく派生データの計算に利用される

入力としてatom (共有状態) recoilまたは他のselector (純粋な関数) recoilを受け入れる純粋な関数

状態の最小セットがatom (共有状態) recoilに格納され、他のすべてがその最小状態のselector (純粋な関数) recoilとして効率的に計算されるため、冗長な状態を回避

selector (純粋な関数) recoilは、のコンポーネントがそれらを必要とし、どの状態に依存しているかを追跡する

atomと同じ

code:recoil.js

const fontSizeLabelState = selector({

key: 'fontSizeLabelState',

// getは、計算される関数

// 渡された引数を使用して、atom およびその他のセレクターの値にアクセス

// - 引数が更新されると再計算される

get: ({get}) => {

// 感想: 依存するstateは、中に書いてgetで取り出すのね。

const fontSize = get(fontSizeState);

const unit = 'px';

return ${fontSize}${unit};

});

code: recoil.js

function FontButton() {

const fontSize, setFontSize = useRecoilState(fontSizeState);

// useRecoilValue: atomまたはselectorを引数として取り、対応する値をを使用して読み取る時に利用

const fontSizeLabel = useRecoilValue(fontSizeLabelState);

疑問

useRecoilValue(fontSizeLabelState);のように、利用しているが、fontSizeLabelStateのget: ({get}) => {のgetって引数はどこから？

https://i.gyazo.com/2e42d04ae1ba114f5bd3aa0dde61473d.jpg

下の平面がComponent Tree